<template>
	<u-popup :show="visible" :closeable="true" :safeAreaInsetBottom="false" round="10" @close="$emit('cancel')">
		<view class="pl-30 pr-30 pt-90">
			<view class="flex">
				<image class="width-160 height-160 shrink0" :src="productData.FPic"></image>
				<view class="flex justify-between flex-column ml-20 w-100">
					<view class="fweigh-600 fsize-34">{{ productData.FName }}</view>
					<view class="flex justify-between">
						<view class="line-red">
							<text class="fsize-26">￥</text>
							<text class="fsize-36 fweigh-600">{{ productData.FPosPrice }}</text>
						</view>
						<actions :number="productData.number" @add="add" @minus="minus"></actions>
					</view>
				</view>
			</view>
			<view class="fsize-24 line-gray mt-40 line-height-28 fweight-500">{{ productData.description || '' }}</view>
			<scroll-view scroll-y class="scroll-view">
				<view class="materials" v-for="(material, index) in productData.materials" :key="index">
					<view class="group-name">{{ material.group_name }}</view>
					<view class="values">
						<view
							class="value"
							:class="{ selected: value.is_selected === 1 }"
							@tap="changeMaterialSelected(index, key, 0)"
							v-for="(value, key) in material.values"
							:key="key"
						>
							{{ value.FSpec || value.FName }}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottom">
				<view class="add-cart-btn" @tap="addToCart">
					<text class="">
						<text class="fsize-24">￥</text>
						<text>{{ productData.FPosPrice * productData.number * num }}</text>
					</text>
					<text class="ml-10">加入购车</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import Actions from '../actions/actions.vue';
export default {
	name: 'ProductPopup',
	components: {
		Actions
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		product: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			productData: {},
			price: null,
			num: null
		};
	},
	watch: {
		product(val) {
			this.productData = JSON.parse(JSON.stringify(val));
			if (this.productData.materials) {
				(this.price = this.productData.materials[0].values[0].FPosPrice), (this.num = this.productData.materials[1].values[0].FQty || 1);
				this.productData.FFoodID = this.productData.materials[0].values[0].FItemID;
			} else {
				this.productData.FFoodID = this.productData.FSubItemID;
			}
			this.$set(this.productData, 'number', 1);
		}
	},
	computed: {
		// getProductSelectedMaterials() {
		// 	if(this.productData.FSpecFlag === 1 && this.productData.materials) {
		// 		let materials = []
		// 		this.productData.materials.forEach(({values}) => {
		// 			values.forEach(value => {
		// 				if(value.is_selected) {
		// 					materials.push(value.FSpec || value.FName)
		// 				}
		// 			})
		// 		})
		// 		return materials.length ? materials.join('，') : ''
		// 	}
		// 	return ''
		// }
	},
	methods: {
		changeMaterialSelected(index, key, selectType) {
			const currentMaterial = this.productData.materials[index].values[key];
			if (currentMaterial.is_selected) return;
			if (index === 0) {
				this.price = currentMaterial.FPosPrice;
				this.productData.FPosPrice = this.price;
				this.productData.FFoodID = currentMaterial.FItemID;
			} else if (index === 1) {
				this.num = currentMaterial.FQty;
			}
			if (selectType === 0) {
				this.productData.materials[index].values[key].is_selected = this.productData.materials[index].values[key].is_selected === 0 ? 1 : 0;
			} else {
				this.productData.materials[index].values.forEach((value) => this.$set(value, 'is_selected', 0));
				currentMaterial.is_selected = 1;
			}
			this.productData.number = 1;
			this.productData.FConvert = this.num;
		},
		add() {
			this.productData.number += 1;
		},
		minus() {
			if (this.productData.number == 1) {
				return;
			}
			this.productData.number -= 1;
		},
		addToCart() {
			const product = {
				...this.productData
				// 'materials_text': this.getProductSelectedMaterials,
			};
			this.$emit('add-to-cart', product);
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-cancel {
	padding: 20rpx;
	display: flex;
	justify-content: flex-end;
	opacity: 0.2;
}
.scroll-view {
	display: flex;
	flex-direction: column;
	font-size: 24rpx;
	color: #777;
	border-top: 1px #ededed solid;
	padding-top: 40rpx;
	margin-top: 40rpx;
	min-height: 1vh;
	max-height: calc(100vh - 100rpx - 426rpx - 250rpx);

	.materials {
		margin-bottom: 20rpx;

		.group-name {
			padding: 10rpx 0;
		}

		.values {
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;

			.value {
				background-color: #f5f5f7;
				color: 26rpx;
				padding: 10rpx 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 12rpx;

				&.selected {
					background-color: #e0a32d;
					color: #fff;
				}
			}
		}
	}
}
.bottom {
	padding: 0 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #fff;
	position: relative;
	z-index: 11;

	.add-cart-btn {
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		text-align: center;
		font-weight: bold;
		color: #111111;
		background: linear-gradient(34deg, #f3c45d, #edac2f);
		border-radius: 45rpx;
	}
}
</style>
